<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{system/base/layout}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>后台管理系统-管理员中心-我的消息</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css"/>
    <!--    <link th:href="@{/lyear/css/font/iconfont.css}" rel="stylesheet" type="text/css"/>-->
    <link th:href="@{/lyear/css/font2/iconfont.css}" rel="stylesheet" type="text/css"/>
    <!--弹出框样式-->
    <link th:href="@{/lyear/jconfirm/jquery-confirm.min.css}" rel="stylesheet" type="text/css"/>
    <!--自定义样式-->
    <link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" th:href="@{/chat/css/chats.css}" type="text/css">

    <script th:src="@{/js2/jquery.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <!--滚动条插件-->
    <script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
    <!--弹出框js-->
    <script th:src="@{/lyear/jconfirm/jquery-confirm.min.js}"></script>
    <!--自定义js脚本-->
    <script th:src="@{/lyear/js/main.min.js}"></script>
    <script th:src="@{/js2/md5.js}"></script>

    <script th:src="@{/chat/layui/layui.all.js}"></script>
    <script th:src="@{/js/jquery_min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/wow.min.js}"></script>
    <script th:src="@{/js/custom.js}"></script>
    <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
    <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:inline="javascript">
        window.onload = function(){
            // document.getElementById('chatContainer').onload = function(){
            const textarea = document.getElementById('chatContainer');
            textarea.scrollTop = textarea.scrollHeight;

        }
        var websocket = null;
        // var target = "ws://172.20.64.253:8081/ws/";
        var target = "ws://localhost:8080/platform/websocket";
        //这里需要的路径需要配置相对应的路径
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket(target);

        } else {
            window.alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            console.log("Loc MSG: 建立连接");
            $.ajax({
                url: '/platform/information/updateWindow?linkId='+$("#sendId").attr("linkId") + "&id=" + $("#sendId").attr("fromId"),
                type: 'put',
                success: function (result) {
                    if (result.code === 100) {
                        console.log('更改在线消息成功');
                    } else {
                        console.log('更改在线消息失败！');
                    }
                }
            })
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            // window.alert("收到信息");
            console.log("收到消息");

            setTimeout(function () {
                var topDiv = document.getElementById("ulName");
                var ul = document.createElement("ul");
                ul.setAttribute("style","padding-left: 0px");
                var newLi = document.createElement("li");
                var div = document.createElement("div");
                var span = document.createElement("span");
                var chatMessage = JSON.parse(event.data);
                console.log(chatMessage.sendTime);
                if (chatMessage.sendUser==$("#sendId").attr("fromName") && chatMessage.content!=''){
                    var div1 = document.createElement("div");
                    var div2 = document.createElement("div");
                    var div3 = document.createElement("div");
                    div1.innerHTML = chatMessage.content;
                    div2.className = "line";
                    // div3.innerHTML = chatMessage.sendTime;
                    div3.innerText = chatMessage.sendTime;
                    div3.className = "sendTime";
                    newLi.className = "me";
                    span.appendChild(div1);
                    span.appendChild(div2);
                    span.appendChild(div3);

                    var img = document.createElement("img");
                    div.className = "image-me";
                    img.setAttribute("src", "../images/U_me.jpg");
                    div.appendChild(img);
                    newLi.appendChild(div);
                    newLi.appendChild(span);
                    ul.appendChild(newLi);
                    topDiv.appendChild(ul);
                    $("#messageInput").val('');
                }else if(chatMessage.sendUser!=$("#sendId").attr("fromName") && chatMessage.content!=''){
                    var div1 = document.createElement("div");
                    var div2 = document.createElement("div");
                    var div3 = document.createElement("div");
                    div1.innerHTML = chatMessage.content;
                    div2.className = "line";
                    // div3.innerHTML = chatMessage.sendTime;
                    div3.innerText = chatMessage.sendTime;
                    div3.className = "sendTime";
                    newLi.className = "you";
                    span.appendChild(div1);
                    span.appendChild(div2);
                    span.appendChild(div3);

                    var img = document.createElement("img");
                    div.className = "image-friend";
                    img.setAttribute("src", "../images/U_hr.jpg");
                    div.appendChild(img);
                    newLi.appendChild(div);
                    newLi.appendChild(span);
                    ul.appendChild(newLi);
                    topDiv.appendChild(ul);
                }
                const textarea = document.getElementById('chatContainer');
                textarea.scrollTop = textarea.scrollHeight;
                // location.href = "/platform/intoChat?linkId="+$("#sendId").attr("linkId") + "&toName=" + $("#sendId").attr("toName");
            }, 500);
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("Loc MSG:关闭连接");
            $.ajax({
                url: '/platform/information/closeWindow?linkId='+$("#sendId").attr("linkId") + "&id=" + $("#sendId").attr("fromId"),
                type: 'put',
                success: function (result) {
                    if (result.code === 100) {
                        window.alert('更改离线消息成功');
                    } else {
                        window.alert('更改离线消息失败！');
                    }
                }
            })
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
        window.onunload = function (){
            websocket.close();
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            //获取输入的文本信息进行发送
            var message = $('#messageInput').val();
            var linkId = $("#sendId").attr("linkId");
            var toId = $("#sendId").attr("toId");
            var chatMsg = {content: message, toId: toId};

            websocket.send(JSON.stringify(chatMsg));
            // setTimeout(function () {
            //     location.href = "/platform/intoChat?linkId="+$("#sendId").attr("linkId") + "&toName=" + $("#sendId").attr("toName");
            // }, 1000);
        }

        function showSearch(){
            var showInfo = document.getElementById("showInfo");
            var showSearch = document.getElementById("showSearch");
            showInfo.style.display = "none";
            showSearch.style.display = "block";
        }
        function closeSearch(){
            var showInfo = document.getElementById("showInfo");
            var showSearch = document.getElementById("showSearch");
            showInfo.style.display = "block";
            showSearch.style.display = "none";
        }

    </script>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container" layout:fragment="content">
        <main class="lyear-layout-content">
            <div class="container container-fluid">
                <div class="row">
                    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12" style="margin-left: 20px">
                        <div class="box" id="chat" style="margin-top: 0px">
                            <!-- 聊天列表 -->
                            <div class="chat-list">
                                <!-- 顶部个人信息部分 -->
                                <div class="header" id="showInfo" style="display: block">
                                    <div class="pic2">
                                        <img th:src="@{/images/U_me.jpg}" alt="">
                                    </div>
                                    <span th:text="${fromName}"></span>
                                    <div class="search-friends" onclick="showSearch()"></div>
                                </div>
                                <!-- 巨大的搜索框 -->
                                <div class="search-input" id="showSearch" style="display: none">
                                    <img th:src="@{/images/search.png}" class="search-input-img" alt="">
                                    <input type="text" onmouseleave="closeSearch()">
                                </div>

                                <!-- 聊天列表 -->
                                <div class="friends">
                                    <ul id="friendList" style="padding-left: 0px;">
                                        <li th:each="chatListDTO:${chatListDTOList}"
                                            th:class="${chatListDTO.toName == toName} ? 'current2' : ''"
                                        >
                                            <div class="friend-pic">
                                                <span th:if="${chatListDTO.unread != 0}" th:text="${chatListDTO.unread}"></span>
                                                <a th:href="@{/system/intoMyInformation(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                    <img th:src="@{/images/U_hr.jpg}" alt="">
                                                </a>
                                            </div>
                                            <a th:href="@{/system/intoMyInformation(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                <i class="name" th:text="${chatListDTO.toName}" style="font-style: normal;"></i>
                                            </a>
                                            <a th:href="@{/system/intoMyInformation(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                <i class="shortcut" th:text="${chatListDTO.lastMessage}" style="font-style: normal;"></i>
                                            </a>

                                            <div class="time" th:text="${chatListDTO.sendTime}"></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 聊天框 -->
                            <div class="chat-content">
                                <!--        <div class="unread" v-show="hasUnread">-->
                                <!--            <span @click='scrollBottom'>&nbsp;&nbsp;↓↓ 有新消息未读&nbsp;&nbsp;|</span>-->
                                <!--            <span @click='hideUnreadBtn'>&nbsp;×&nbsp;</span>-->
                                <!--        </div>-->
                                <div class="firend-name" th:text="${toName}"></div>
                                <div class="chat-middle" id="chatContainer"
                                     @scroll='scrollHistory($event)'>
                                    <div class="content" id="ulName">
                                        <ul th:if="${toName != ''}" th:each="chatMessage:${chatMessageDTOList}" style="padding-left: 0px">
                                            <li th:if="${chatMessage.sendUser==fromName && chatMessage.content!=''} " class="me">
                                                <div class="image-me">
                                                    <img th:src="@{/images/U_me.jpg}" alt=" ">
                                                </div>
                                                <span>
                                                <div th:text="${chatMessage.content}"></div>
                                                <div class="line"></div>
                                                <div class="sendTime" th:text="${chatMessage.sendTime}"></div>
                                            </span>
                                            </li>
                                            <li th:if="${chatMessage.sendUser!=fromName && chatMessage.content!=''}" class="you">
                                                <div class="image-friend">
                                                    <img th:src="@{/images/U_hr.jpg}" alt=" ">
                                                </div>
                                                <span>
                                                <div th:text="${chatMessage.content}"></div>
                                                <div class="line"></div>
                                                <div class="sendTime" th:text="${chatMessage.sendTime}"></div>
                                            </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div th:if="${toName != ''}" class="chat-bottom">
                                <textarea cols="30" rows="10" placeholder="请输入要发送的消息..."
                                          id="messageInput"></textarea>
                                    <button class="chat-send" onclick="send()" id="sendId" th:attr="linkId = ${linkId}, toName = ${toName}, toId = ${toId}, fromId = ${fromId}, fromName = ${fromName}">发送</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

</body>
</html>